<template>
	<view class="s-page-wrapper is-100vh">
		<view class="logo-view"><image src="../../static/img/logo.png" mode="widthFix" style="width: 500rpx;"></image></view>
		<view class="app-name-view">
			<view>欢迎使用</view>
			<view>APP管理系统</view>
		</view>
		<view class="app-form-view">
			<form class="app-form">
				<view class="input-view app-rows">
					<text class="iconfont icon-account1 input-icon"></text>
					<input type="text" v-model="loginForm.username" placeholder="请输入登录名" class="login-input" />
				</view>
				<view class="input-view app-rows">
					<text class="iconfont icon-mima input-icon"></text>
					<input type="password" v-model="loginForm.password" placeholder="请输入登录密码" class="login-input" />
				</view>
				<view class="btn-view">
					<button class="login-btn" @click="onSubmit">{{ loginForm.loading ? '登录中...' : '登 录' }}</button>
				</view>
				<view class="other-view uni-list-cell"  style="background-color: #F9F9F9;">
					<view class="uni-list-cell"></view>
					<view class="uni-list-cell">
						<picker @change="serverPickerChange" :value="serverPickerIndex" :range="$config.SERVER_DATA" range-key="name"  style="background-color: #F9F9F9;">
							<view class="input-text" v-if="serverPickerIndex !== undefined">{{ $config.SERVER_DATA[serverPickerIndex].name }}</view>
							<view class="input-text" v-else>服务器选择</view>
						</picker>
					</view>
					<view class="uni-list-cell"></view>
				</view>
			</form>
		</view>
		<view class="oauth-login-view">
			<view>- 快捷登录 -</view>
			<view class="app-flex oauth-img-view">
				<image src="../../static/img/login/qq.png" class="oauth-img"></image>
				<image src="../../static/img/login/wechat.png" class="oauth-img"></image>
				<image src="../../static/img/login/weibo.png" class="oauth-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
import commonService from '../../api/common';
import loginService from '../../api/login';
import userService from '../../api/user';
export default {
	data() {
		return {
			serverPickerIndex: undefined,
			loginForm: {
				username: '',
				password: ''
			}
		};
	},
	onShow() {
		const that = this;
		if (process.env.NODE_ENV === 'development') {
			that.loginForm = {
				username: 'admin',
				password: 'admin'
			};
		}
		setTimeout(function() {
			const token = uni.getStorageSync(that.$config.TOKEN_NAME);
			if (that.$util.isNotEmpty(token)) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				//将上述信息存储起来
				const serverInfo = uni.getStorageSync(that.$config.SERVER_INFO_CONFIG_KEY);
				if (!that.$util.isEmptyObject(serverInfo)) {
					that.serverPickerIndex = serverInfo['index']
				}
				//that.onSubmit();
			}
		}, 500);
	},
	onLoad() {
		
	},
	methods: {
		serverPickerChange(e) {
			const that = this;
			that.serverPickerIndex = e.target.value;
			//将上述信息存储起来
			const serverInfo = that.$config.SERVER_DATA[that.serverPickerIndex];
			//缓存服务器配置信息
			uni.setStorageSync(that.$config.SERVER_INFO_CONFIG_KEY, serverInfo);
		},

		onSubmit: async function() {
			const that = this;
			const serverInfo = uni.getStorageSync(that.$config.SERVER_INFO_CONFIG_KEY);
			if (that.$util.isEmptyObject(serverInfo)) {
				uni.showToast({
					title: '请先选择服务器',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			//判断用户名是否为空
			if (that.$util.isEmpty(this.loginForm.username.trim())) {
				uni.showToast({
					title: '用户名不能为空',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			//判断密码是否为空
			if (that.$util.isEmpty(this.loginForm.password.trim())) {
				uni.showToast({
					title: '密码不能为空',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			//登录逻辑
			//登录操作
			uni.showLoading({
				title: '登录中...'
			});
			const loginData = await loginService.login(this.loginForm.username, this.loginForm.password);
			if (loginData && loginData.success) {
				//默认存储当前的token到缓存中
				uni.setStorageSync(that.$config.TOKEN_NAME, loginData['data']);
				//此处要获取用户的信息，放到本地缓存中
				const userRes = await userService.getUserInfo();
				if (userRes && userRes.success) {
					uni.setStorageSync(that.$config.USER_KEY, userRes.data);
				}

				// #ifdef APP-PLUS
				//登录成功，将获取APP终端标识client与用户绑定
				const clientInfo = plus.push.getClientInfo();
				const pushClientData = {
					clientId: clientInfo.clientid,
					userId: userRes.data.id
				};
				commonService.savePushClient(pushClientData);
				//#endif

				uni.hideLoading();
				//直接跳转到主页面
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				uni.showToast({
					title: '账号或密码错误',
					duration: 2000,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped="">
.s-page-wrapper {
	min-height: 100%;
	background-color:#F9F9F9;
}

.logo-view {
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	text-align: center;
	margin: 50rpx 20rpx 50rpx 20rpx;

	.logo-img {
		width: 100%;
		height: 100%;
	}
}

.app-name-view {
	text-align: center;
	font-size: 50rpx;
	margin-top: 20%;
}

.app-form-view {
	margin-top: 8%;

	.input-text {
		color: #007aff;
		
	}
}

.oauth-login-view {
	display: block;
	margin: 10% 0 5% 0;
	color: #adadad;
	text-align: center;
	font-size: 30rpx;

	.oauth-img-view {
		justify-content: center;
		align-items: center;

		.oauth-img {
			margin: 30rpx 50rpx 10rpx 50rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}
}

.content {
	width: 85%;
	margin: 0 auto;
}

.input-view {
	padding: 20rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;

	.input-icon {
		font-size: 38rpx;
		position: absolute;
		z-index: 1;
		padding: 23rpx 25rpx;
	}

	.login-input {
		width: 100%;
		color: #353535;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 50rpx;
		box-sizing: border-box;
		appearance: none;
		border: 2rpx solid #e5e5e5;
		border-radius: 20rpx;
		box-shadow: none;
		outline: 0;
		margin: 0;
		background: #fff;
		resize: none;
	}
}

.btn-view {
	padding: 20rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;

	.login-btn {
		width: 100%;
		color: #f4f5f6;
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border: 2rpx solid #e5e5e5;
		border-radius: 20rpx;
		font-family: inherit;
		background: $uni-color-primary;
		resize: none;
	}
}

.other-view {
	margin: 10rpx 50rpx 10rpx 50rpx;
	text-align: center;
}

.sf-input-view {
	padding: 10rpx;

	.sf-input {
		font-size: 28rpx;
		width: 480rpx;
		color: #353535;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 25rpx;
		appearance: none;
		border: 2rpx solid #e5e5e5;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}

	.sf-red {
		color: red;
		height: 70rpx;
		line-height: 70rpx;
		width: 20rpx;
	}
}
</style>
